import React from 'react';
import {Card, Button, Table, Row, Col, Spin} from 'antd';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
import PropTypes from 'prop-types';
import routes from './routes';
import {TABLE} from '../constants';
import {getDetail} from './api';
import {injectIntl} from './intl';
const {Description} = DescriptionList;
class DetailPanel extends React.PureComponent {
    state = {
        isFetching: false,
        data: {},
        details: [],
    }
    componentDidMount() {
        this.getDetailInfo();
    }
    getDetailInfo = () => {
        const condition = {
            month: this.props.month,
            year: this.props.year,
            dealerId: this.props.dealerId
        };
        this.setState({isFetching: true});
        getDetail(condition)
            .then(res => {
                if(res.ok)
                    this.setState({
                        isFetching: false,
                        data: res.data,
                        details: res.data.details
                    });
                    
                else
                    this.setState(({
                        isFetching: false
                    }));
            });
    }
    onCancel = () => {
        this.props.history.push(routes.query.url());
    }
    render() {
        const {data, details} = this.state;
        const {formatMessage} = this.props.intl;
        const columns = [
            {
                title: formatMessage({
                    id: 'detailPanel.columns.vin',
                    defaultMessage: 'VIN'
                }),
                dataIndex: 'vin'
            },
            {
                title: formatMessage({
                    id: 'detailPanel.columns.productCategoryCode',
                    defaultMessage: '车型编号'
                }),
                dataIndex: 'productCategoryCode',
            },
            {
                title: formatMessage({
                    id: 'detailPanel.columns.productCategoryName',
                    defaultMessage: '车型名称'
                }),
                dataIndex: 'productCategoryName'
            },
            {
                title: formatMessage({
                    id: 'detailPanel.columns.productCode',
                    defaultMessage: '产品编号'
                }),
                dataIndex: 'productCode'
            },
            {
                title: formatMessage({
                    id: 'detailPanel.columns.productName',
                    defaultMessage: '产品名称'
                }),
                dataIndex: 'productName'
            },
            {
                title: formatMessage({
                    id: 'detailPanel.columns.displacement',
                    defaultMessage: '排量'
                }),
                dataIndex: 'displacement'
            },
            {
                title: formatMessage({
                    id: 'detailPanel.columns.color',
                    defaultMessage: '颜色'
                }),
                dataIndex: 'color'
            }
        ];
        return (
            <div>
                <Spin spinning={this.state.isFetching}>
                    <Card>
                        <DescriptionList size="large" title={<Row><Col span={12}>{
                            formatMessage({
                                id: 'detailPanel.card.title',
                                defaultMessage: '整车整车库存主单'
                            })
                        }</Col>
                        </Row>}>
                            {!this.props.isDealerUser && <Description term={formatMessage({
                                id: 'detailPanel.form.dealerCode',
                                defaultMessage: '总代'
                            })}>{`(${data.dealerCode})${data.dealerName}`}</Description>}
                            {!this.props.isDealerUser && <Description term={formatMessage({
                                id: 'detailPanel.form.country',
                                defaultMessage: '国家'
                            })}>{data.country}</Description>}
                            <Description term={formatMessage({
                                id: 'detailPanel.form.year',
                                defaultMessage: '库存年度'
                            })}>{data.year}</Description>
                            <Description term={formatMessage({
                                id: 'detailPanel.form.month',
                                defaultMessage: '库存月度'
                            })}>{data.month}</Description>
                            <Description term={formatMessage({
                                id: 'detailPanel.form.stockQuantity',
                                defaultMessage: '库存数量'
                            })}>{data.stockQuantity}</Description>
                        </DescriptionList>
                    </Card>
                    <Card title={this.props.intl.formatMessage({
                        id: 'detailPanel.table.detail',
                        defaultMessage: '整车整车库存清单'
                    })}>
                        <Table
                            className="white-space-nowrap"
                            columns={columns}
                            rowKey="id"
                            pagination={false}
                            dataSource={details}
                            {...TABLE} />
                    </Card>
                </Spin>
                <div className="page-toolbar">
                    <Button type="primary" onClick={this.onCancel}>{this.props.intl.formatMessage({
                        id: 'detailPanel.operation.onCancel',
                        defaultMessage: '返回'
                    })}</Button>
                </div>
            </div>
        );
    }
}

DetailPanel.propTypes = {
    country: PropTypes.string,
    dealerId: PropTypes.string,
    history: PropTypes.object,
    intl: PropTypes.object,
    isDealerUser: PropTypes.bool,
    month: PropTypes.number,
    year: PropTypes.number
};

import {connect} from 'react-redux';
import {tableSearch} from './actions';
import selectorFactory from 'Shared/utils/immutableToJsSelectorFactory';
const getPermissions = selectorFactory(['page', 'domainData', 'permission', 'data']);
const mapStateToProps = state => ({
    permissions: getPermissions(state),
    isDealerUser: state.getIn((['page', 'domainData', 'initData', 'isDealerUser'])),
});
const mapDispatchToProps = (dispatch, props) => ({
    successReturn: () => {
        dispatch(tableSearch());
        props.history.push(routes.query.url());
    },
    onCancel: () => {
        props.history.push(routes.query.url());
    },
});
export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(DetailPanel));
